<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button size="small" type="primary" @click="categorysync"
          >同步类目库</el-button
        >
      </div>
      <el-table
        v-loading="listLoading"
        :data="tableData.data"
        style="width: 100%"
        size="small"
        highlight-current-row
      >
        <el-table-column
          prop="cat_name"
          label="类目"
          min-width="200"
        />
        <el-table-column label="类目资质" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.qualification_type_name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品资质" min-width="100">
          <template slot-scope="scope">
            <span>{{scope.row.product_qualification_type_name}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="audit_time"
          label="审核时间"
          min-width="150"
        />
        <el-table-column
          prop="status_name"
          label="审核状态"
          min-width="150"
        />
        <el-table-column label="操作" min-width="100" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="uploadQualifications(scope.row)" v-if="scope.row.qualification_type != 0 || scope.row.product_qualification_type != 0"
              >上传资质</el-button>
            <el-button type="text" size="small" @click="getResion(scope.row)" v-if="scope.row.status == 9"
              >查看失败原因</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="tableFrom.limit"
          :current-page="tableFrom.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <el-dialog
      title="上传资质"
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="handleClose"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="200px"
        class="demo-ruleForm"
        width= "60%"
      >
        <el-form-item label="服务类目：" prop="zhengshu">
          <div>
            {{data.cat_name}}
          </div>
        </el-form-item>
        <el-form-item label="营业执照或组织机构代码证：" prop="zhengshu">
          <div
            class="upLoadPicBox"
            @click="modalPicTap('1', 'zhengshu')"
            title="750*750px"
          >
            <div v-if="ruleForm.zhengshu" class="pictrue">
              <img :src="ruleForm.zhengshu" />
            </div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="上传类目资质：" prop="leimu_qualification" v-if="false">
          <div>
            {{data.qualification}}
          </div>
        </el-form-item>
        <el-form-item label="上传类目资质：" prop="leimu_qualification">
          <div
            class="upLoadPicBox"
            @click="modalPicTap('1', 'leimu')"
            title="750*750px"
          >
            <div v-if="ruleForm.leimu_qualification" class="pictrue">
              <img :src="ruleForm.leimu_qualification" />
            </div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item label="上传商品资质：" prop="product_qualification">
          <div
            class="upLoadPicBox"
            @click="modalPicTap('1', 'product')"
            title="750*750px"
          >
            <div v-if="ruleForm.product_qualification" class="pictrue">
              <img :src="ruleForm.product_qualification" />
            </div>
            <div v-else class="upLoad">
              <i class="el-icon-camera cameraIconfont" />
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            @click="submitForm('ruleForm')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  
</template>
<style lang="scss">

</style>
<script>
import { 
  categoryListApi, 
  categorySyncApi, 
  qualificationApi
} from "@/api/ministore";
// import CreatAttr from './creatAttr'
export default {
  name: "category",
  data() {
    return {
      formDynamic: {
        template_name: "",
        template_value: [],
      },
      tableFrom: {
        page: 1,
        limit: 20,
      },
      tableData: {
        data: [],
        total: 0,
      },
      listLoading: true,
      qualification_type: {
        0:"不需要",
        1:"需要",
        2:"选填"
      },
      product_qualification_type: {
        0:"不需要",
        1:"需要",
        2:"选填"
      },
      dialogVisible: false,
      loading: false,
      data: {},
      ruleForm: {
        zhengshu: '',
        first_cat_id: '',
        second_cat_id: '',
        third_cat_id: '',
        leimu_qualification: '',
        product_qualification: ''
      },
      rules: {
        status: [
          { required: true, message: "请选择对账状态", trigger: "change" },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    categorysync() {
      this.listLoading = true;
      categorySyncApi().then((res)=>{
        this.listLoading = false;
        this.getList();
        this.$message.success(res.message);
      }).catch((res) => {
        console.log(res)
        this.listLoading = false;
        this.$message.error(res.message);
      })
    },
    // 列表
    getList() {
      this.listLoading = true;
      categoryListApi(this.tableFrom)
        .then((res) => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.count;
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    pageChange(page) {
        console.log(page)
      this.tableFrom.page = page;
      this.getList();
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList();
    },
    // 删除
    handleDelete(id, idx) {
      this.$modalSure().then(() => {
        attrDeleteApi(id)
          .then(({ message }) => {
            this.$message.success(message);
            this.tableData.data.splice(idx, 1);
          })
          .catch(({ message }) => {
            this.$message.error(message);
          });
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.data = {};
      this.$refs["ruleForm"].resetFields();
    },
    // 上传资质
    uploadQualifications(row){
      this.ruleForm.first_cat_id = row.first_cat_id;
      this.ruleForm.second_cat_id = row.second_cat_id;
      this.ruleForm.third_cat_id = row.third_cat_id;
      this.data = row;
      this.dialogVisible = true;
    },
    // 获取失败原因
    getResion(row){
      this.$alert(row.reject_reason, '失败原因', {
          confirmButtonText: '确定'
        });
    },
    submitForm() {
      console.log(this.ruleForm)
      console.log(this.data)
      this.listLoading = true;

      qualificationApi(this.ruleForm).then((res) => {
        this.listLoading = false;
      })
      .catch((res) => {
        this.listLoading = false;
        this.$message.error(res.message);
      });
    },
    // 点击商品图
    modalPicTap(tit, type) {
      const _this = this;
      this.$modalUpload(function (img) {
        if (type == 'zhengshu') {
          _this.ruleForm.zhengshu = img[0];
        } else if (type == 'leimu') {
          _this.ruleForm.leimu_qualification = img[0];
        } else if (type == 'product') {
          _this.ruleForm.product_qualification = img[0];
        }
      }, tit);
    },
  },
};
</script>
